<html>

<head>
    <!-- jq -->
    <script src="/public/jQuery.min.js"></script>
    <!-- jq -->
</head>

<body>
    <div id="footer">
        <div class="footfirst">
            <div class="flexline">
                {foreach name="web" item="v"}
                <div class="foottit">
                    <h2>{$v.bottom_title}</h2>
                        <p>{$v.bottom_abs}</p>
                </div>
                {/foreach}
                <div class="flexsline">
                    <div class="service">
                        <p>在线客服：<a class="servicea" href="#">点击交流</a></p>
                        <p>客服热线:{$web[0]['service']}</p>
                    </div>
                    <div class="team">
                        <p>合作伙伴：<a href="">查看所有</a></p>
                    </div>
                </div>
            </div>

            <div class="teamimgbox">
                {foreach name="partners" item="v"}
                <img src="{$v.logo}" alt="">
                {/foreach}
            </div>

        </div>
        <div class="footintro">
            <h2>公司简介</h2>
            {foreach name="company" item="v"}
            <ul><a href="{$v.url}">{$v.title}</a></ul>
            {/foreach}
        </div>
        <div class="footintro">
            <h2>应用案例</h2>
            {foreach name="appcase" item="v"}
            <ul><a href="$v.url">{$v.title}</a></ul>
            {/foreach}
        </div>
        <div class="footintro">
            <h2>新闻中心</h2>
            {foreach name="news_center" item="v"}
            <ul><a href="{$v.url}">{$v.title}</a></ul>
            {/foreach}
        </div>
        <div class="footintro">
            <h2>服务支持</h2>
            {foreach name="service" item="v"}
            <ul><a href="{$v.url}">{$v.title}</a></ul>
            {/foreach}
        </div>
    </div>
    <div class="underbox">{$web[0]['filings']}</div>
</body>

<script>

</script>
<style lang="scss">
    * {
        padding: 0;
        margin: 0;
        box-sizing: border-box;
    }

    #footer {
        width: 90%;
        margin: auto;
        padding: 20px 0;
        box-sizing: border-box;
        line-height: 36px;
        display: flex;
        justify-content: space-between;

        .footfirst {
            width: 32%;

            .service {
                margin-top: 20px;

                .servicea {
                    color: #70B0FF;
                    text-decoration: none;
                }
            }

            .team {
                margin-top: 16px;

                & a {
                    text-decoration: none;
                    color: #70B0FF;
                }
            }

        }

        .footintro {
            margin-left: 36px;

            & a {
                color: black;
                text-decoration: none;
            }
        }
    }
    .underbox{
        width: 100%;
        background-color: #252B3A;
        text-align: center;
        color: white;
        font-weight: bold;
        font-size: 1em;
        padding: 1% 0;
    }

    @media screen and (max-width:992px) {

    }

    @media screen and (max-width:768px) {
        #footer {
            display: block;
            font-size: 8px;
            padding: 20px 0;
            width: 90%;
            line-height: normal;
            .footfirst{
                width: 100%;
                .flexline{
                    display: flex;
                    .foottit{
                    width: 50%;
                }
                .service{
                    margin-top: 0;
                }
                .team{
                    margin-top: 0;
                }
                }
                
                .teamimgbox{

                }
            }
            .teamimgbox {
                width: 66%;
                margin: auto;
                margin-top: 5px;
                display: flex;
                justify-content: space-between;
                & img{
                    width: 30%;
                    
                }
            }

            .footintro {
                display: none;
            }
        }
        .underbox{
            font-size: 0.2em;
        }

    }
</style>

</html>
